import {useState} from 'react'
import logo from './logo.png'
import useClass from './hooks/use-class';
import useNum from './hooks/use-num';
import useNumValid from './hooks/use-numVaild';
//默认div是蓝色背景，图片是不激活的状态
//点击图片，变成激活的状态（图片加个框）
//点击图片外，图片变成非激活状态
const Copy = () =>  {
  const { handleImg, handleBox, imgClass, boxClass } = useClass();
  const { handleAdd, handleDecrease, num } = useNum();
  const { value, onChange, err } = useNumValid();

   return (
    <div
      className={boxClass}
      onClick={handleBox}
    >
      <h2>{num}</h2>
      <button onClick={handleAdd}>点击+1</button>
      <button onClick={handleDecrease}>点击-1</button>
      <img 
        // className={isActive ? 'active' : ''}
        className={imgClass}
        onClick={handleImg} 
        style={{
          width: 200, 
          // border: isActive ? '2px solid #f00' : 'none'
        }} 
        src={logo} 
        alt="" 
      />

      {/* 验证正整数的输入框 */}
      <input onChange={onChange} value={value} type="text" />
      <p>{err}</p>
    </div>
  );
}

export default Copy;
